<template>
<div>
<el-button type="primary"  @click="btn">按钮</el-button>
<el-button type="text"  @click="btn">按钮</el-button>
  <div style="margin-top: 5px">
    <el-form :model="data" label-width="150px">
      <el-form-item label="姓名">
        <el-input v-model="data.name"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-radio-group v-model="data.gender">
          <el-radio value="man">男生</el-radio>
          <el-radio value="woman">女生</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="学院">
        <el-checkbox-group v-model="data.college">
          <el-checkbox value="colleg1" name="计算机学院">计算机学院1</el-checkbox>
          <el-checkbox value="colleg2" name="计算机学院">计算机学院2</el-checkbox>
          <el-checkbox value="colleg3" name="计算机学院">计算机学院3</el-checkbox>
          <el-checkbox value="colleg4" name="计算机学院">计算机学院4</el-checkbox>
          <el-checkbox value="colleg5" name="计算机学院">计算机学院5</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="文本框">
        <el-input type="textarea" v-model="data.textarea"></el-input>
      </el-form-item>
      <el-form-item label="日期">
        <el-date-picker
          type="date"
          v-model="data.date">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="时间">
        <el-time-picker
          v-model="data.time"
        ></el-time-picker>
      </el-form-item>
      <el-form-item label="是否">
        <el-switch v-model="data.yesOrNo" />
      </el-form-item>
    </el-form>
  </div>
  <div style="margin-top: 5px">
    <el-form :model="data" label-width="150px">
      <el-form-item label="姓名">
        <el-input v-model="data.name"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-radio-group v-model="data.gender">
          <el-radio value="man">男生</el-radio>
          <el-radio value="woman">女生</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="学院">
        <el-checkbox-group v-model="data.college">
          <el-checkbox value="colleg1" name="计算机学院">计算机学院1</el-checkbox>
          <el-checkbox value="colleg2" name="计算机学院">计算机学院2</el-checkbox>
          <el-checkbox value="colleg3" name="计算机学院">计算机学院3</el-checkbox>
          <el-checkbox value="colleg4" name="计算机学院">计算机学院4</el-checkbox>
          <el-checkbox value="colleg5" name="计算机学院">计算机学院5</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="文本框">
        <el-input type="textarea" v-model="data.textarea"></el-input>
      </el-form-item>
      <el-form-item label="日期">
        <el-date-picker
          type="date"
          v-model="data.date">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="时间">
        <el-time-picker
          v-model="data.time"
        ></el-time-picker>
      </el-form-item>
      <el-form-item label="是否">
        <el-switch v-model="data.yesOrNo" />
      </el-form-item>
    </el-form>
  </div>
  <div>
    <el-table :data="tableInfo">
      <el-table-column prop="name" label="姓名" ></el-table-column>
      <el-table-column prop="sn" label="学号" ></el-table-column>
      <el-table-column prop="gender" label="性别" ></el-table-column>
      <el-table-column prop="college" label="学院" ></el-table-column>
    </el-table>
  </div>
  <div>
    <el-row>
      <el-col :span="8">
        13213
      </el-col>
      <el-col :span="8">
        hahahaha
      </el-col>
      <el-col :span="8">
        111111111111
      </el-col>
    </el-row>
  </div>
</div>
</template>

<script setup lang="ts">
import {reactive, ref} from "vue";

const tableInfo = ref([
  {
    name: '张三',
    sn: 123156,
    gender: '男',
    college: '历史学院'
  },
  {
    name: '李四',
    sn: 123156,
    gender: '男',
    college: '历史学院'
  },
  {
    name: '王五',
    sn: 123156,
    gender: '男',
    college: '历史学院'
  }
])


const data = reactive({})

function btn(){

}

</script>

<style scoped>

</style>
